<!--
 * @Descripttion: (退款记录表/lay_order_refund)
 * @Author: (admin)
 * @Date: (2024-10-28)
-->
<template>
  <div>
    <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
      <el-form-item>
        <el-form-item label="单号/姓名" prop="title">
          <el-input v-model="queryParams.keyWords" placeholder="单号,客户姓名,电话" />
        </el-form-item>
        <el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
        <el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
      </el-form-item>
    </el-form>
    <!-- 工具区域 -->
    <el-row :gutter="15" class="mb10">
      <!-- <el-col :span="1.5">
        <el-button type="primary" v-hasPermi="['layorderrefund:add']" plain icon="plus" @click="handleAdd">
          {{ $t('btn.add') }}
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-dropdown trigger="click" v-hasPermi="['layorderrefund:import']">
          <el-button type="primary" plain icon="Upload">
            {{ $t('btn.import') }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="upload">
                <importData templateUrl="business/LayOrderRefund/importTemplate"
                  importUrl="/business/LayOrderRefund/importData" @success="handleFileSuccess"></importData>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
</el-dropdown>
</el-col>
<el-col :span="1.5">
  <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['layorderrefund:export']">
    {{ $t('btn.export') }}
  </el-button>
</el-col> -->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
      highlight-current-row @sort-change="sortChange">
      <!-- <el-table-column prop="id" label="Id" align="center" :show-overflow-tooltip="true"
        v-if="columns.showColumn('id')" /> -->
      <!-- <el-table-column prop="orderId" label="订单id" align="center" :show-overflow-tooltip="true" v-if="columns.showColumn('orderId')"/> -->
      <el-table-column prop="refundNo" label="退款单号" align="center" :show-overflow-tooltip="true"
        v-if="columns.showColumn('refundNo')" />
      <el-table-column prop="orderNo" label="订单号" align="center" v-if="columns.showColumn('OrderNo')" />
      <el-table-column label="客户信息" align="center" :show-overflow-tooltip="true"
        v-if="columns.showColumn('customerName')" width="200" style="text-align: left">
        <template #default="scope">
          <p>姓名：{{ scope.row.customerName }}</p>
          <p>电话：{{ scope.row.customerPhone }}</p>
          <p>身份证：{{ scope.row.customerCard }}</p>
          <p>入住人数：{{ scope.row.customerNumber }}</p>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="percent" label="退款比例" align="center" v-if="columns.showColumn('percent')"/> -->
      <el-table-column prop="amountPay" label="订单金额" align="center" v-if="columns.showColumn('amountPay')" />
      <el-table-column prop="refundAmount" label="退款金额" align="center" v-if="columns.showColumn('refundAmount')" />
      <el-table-column prop="statusName" label="退款状态" align="center" v-if="columns.showColumn('status')">
      </el-table-column>
      <!-- <el-table-column prop="refundInfo" label="返回支付信息" align="center" :show-overflow-tooltip="true"
        v-if="columns.showColumn('refundInfo')" /> -->
      <!-- <el-table-column prop="orderListIds" label="勾选日期明细" align="center" :show-overflow-tooltip="true"
        v-if="columns.showColumn('orderListIds')" /> -->
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="primary" size="small" icon="view" title="详情" @click="handlePreview(scope.row)">详情</el-button>
          <!-- <el-button type="success" size="small" icon="edit" title="编辑" v-hasPermi="['layorderrefund:edit']"
            @click="handleUpdate(scope.row)"></el-button>
          <el-button type="danger" size="small" icon="delete" title="删除" v-hasPermi="['layorderrefund:delete']"
            @click="handleDelete(scope.row)"></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />


    <el-dialog :title="title" :lock-scroll="false" v-model="open">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">

          <!-- <el-col :lg="12">
            <el-form-item label="Id" prop="id">
              <el-input v-model="form.id" placeholder="请输入Id" :disabled="opertype != 1" />
            </el-form-item>
          </el-col> -->

          <!-- <el-col :lg="12">
            <el-form-item label="订单id" prop="orderId">
              <el-input v-model="form.orderId" placeholder="请输入订单id" />
            </el-form-item>
          </el-col> -->

          <el-col :lg="6">
            <el-form-item label="退款单号" prop="refundNo">
              {{ form.refundNo }}
            </el-form-item>
          </el-col>
          <el-col :lg="4">
            <el-form-item label="退款金额" prop="refundAmount">
              <label style="color: red;"> {{ form.refundAmount }}</label>
            </el-form-item>
          </el-col>
          <el-col :lg="5">
            <el-form-item label="退款状态" prop="status">
              <label style="color: red;">{{ form.statusName }}</label>
            </el-form-item>
          </el-col>
          <el-col :lg="8">
            <el-form-item label="创建时间" prop="createTime">
              {{ form.createTime }}
            </el-form-item>
          </el-col>
          <!-- <el-col :lg="12">
            <el-form-item label="退款比例" prop="percent">
              <el-input v-model="form.percent" placeholder="请输入退款比例" />
            </el-form-item>
          </el-col> -->


          <el-col :lg="24">
            <el-form-item label="退款信息" prop="refundInfo">
              <el-input type="textarea" v-model="form.refundInfo" :disabled="true" placeholder="退款信息" />
            </el-form-item>
          </el-col>

          <!-- <el-col :lg="24">
            <el-form-item label="勾选日期明细" prop="orderListIds">
              <el-input type="textarea" v-model="form.orderListIds" placeholder="请输入勾选日期明细" />
            </el-form-item>
          </el-col> -->


          <el-table :data="layOrderListDtos" :row-class-name="rowLayOrderListIndex" ref="LayOrderListRef">

            <el-table-column label="序号" align="center" prop="index" width="60" />

            <el-table-column label="日期" align="center" prop="dates">
              <template #default="scope">
                {{ dayjs(scope.row.dates).format("YYYY-MM-DD") }}
              </template>

            </el-table-column>
            <el-table-column label="价格" align="center" prop="price">
            </el-table-column>
            <el-table-column label="优惠价格" align="center" prop="priceDis"></el-table-column>

            <el-table-column label="实付价格" align="center" prop="pricePay"></el-table-column>

            <el-table-column label="状态" prop="statusName">
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
      <template #footer v-if="opertype != 3">
        <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
        <!-- <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button> -->
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="layorderrefund">
import {
  listLayOrderRefund,
  addLayOrderRefund, delLayOrderRefund,
  updateLayOrderRefund, getLayOrderRefund,
}
  from '@/api/business/layorderrefund.js'
import importData from '@/components/ImportData'
import { dayjs, formatter } from 'element-plus';
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
  keyWords: undefined,
  pageNum: 1,
  pageSize: 10,
  sort: 'a.CreateTime',
  sortType: 'desc',
})
const columns = ref([
  { visible: true, align: 'center', type: '', prop: 'id', label: 'Id', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'orderId', label: '订单id', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'refundNo', label: '退款单号', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'percent', label: '退款比例' },
  { visible: true, align: 'center', type: '', prop: 'refundAmount', label: '退款金额' },
  { visible: true, align: 'center', type: 'dict', prop: 'status', label: '1==退款中 2==接收返回状态' },
  { visible: true, align: 'center', type: '', prop: 'refundInfo', label: '返回支付信息', showOverflowTooltip: true },
  { visible: true, align: 'center', type: '', prop: 'orderListIds', label: '勾选日期明细', showOverflowTooltip: true },
  //{ visible: false, prop: 'actions', label: '操作', type: 'slot', width: '160' }
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])


var dictParams = [
]


function getList() {
  loading.value = true
  listLayOrderRefund(queryParams).then(res => {
    const { code, data } = res
    if (code == 200) {
      dataList.value = data.result
      total.value = data.totalNum
      loading.value = false

    }
  })
}
/** 订单明细表序号 */
function rowLayOrderListIndex({ row, rowIndex }) {
  console.log(row)
  row.index = rowIndex + 1;
}
// 查询
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

// 重置查询操作
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.keyWords = null
  handleQuery()
}
// 自定义排序
function sortChange(column) {
  var sort = undefined
  var sortType = undefined

  if (column.prop != null && column.order != null) {
    sort = column.prop
    sortType = column.order

  }
  queryParams.sort = sort
  queryParams.sortType = sortType
  handleQuery()
}

/*************** form操作 ***************/
const layOrderListDtos = ref()
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
  single: true,
  multiple: true,
  form: {},
  rules: {
  },
  options: {
    // 1==退款中 2==接收返回状态 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
    statusOptions: [],
  }
})

const { form, rules, options, single, multiple } = toRefs(state)

// 关闭dialog
function cancel() {
  open.value = false
  reset()
}

// 重置表单
function reset() {
  form.value = {
    id: null,
    orderId: null,
    refundNo: null,
    percent: null,
    refundAmount: null,
    status: null,
    refundInfo: null,
    orderListIds: null,
    createTime: null,
  };
  layOrderListDtos.value = []
  proxy.resetForm("formRef")
}

/**
 * 查看
 * @param {*} row
 */
function handlePreview(row) {
  reset()
  const id = row.id
  getLayOrderRefund(id).then((res) => {
    const { code, data } = res
    if (code == 200) {
      open.value = true
      title.value = '查看'
      opertype.value = 3
      form.value = {
        ...data,
      }
      layOrderListDtos.value = data.layOrderListDtos
      console.log("=========", data.layOrderListDtos)
    }
  })
}

// 添加按钮操作
function handleAdd() {
  reset();
  open.value = true
  title.value = '添加退款记录表'
  opertype.value = 1
}
// 修改按钮操作
function handleUpdate(row) {
  reset()
  const id = row.id || ids.value
  getLayOrderRefund(id).then((res) => {
    const { code, data } = res
    if (code == 200) {
      open.value = true
      title.value = '修改退款记录表'
      opertype.value = 2

      form.value = {
        ...data,
      }
    }
  })
}

// 添加&修改 表单提交
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {

      if (form.value.id != undefined && opertype.value === 2) {
        updateLayOrderRefund(form.value).then((res) => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addLayOrderRefund(form.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

// 删除按钮操作
function handleDelete(row) {
  const Ids = row.id || ids.value

  proxy
    .$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？', "警告", {
      confirmButtonText: proxy.$t('common.ok'),
      cancelButtonText: proxy.$t('common.cancel'),
      type: "warning",
    })
    .then(function () {
      return delLayOrderRefund(Ids)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
}


// 导入数据成功处理
const handleFileSuccess = (response) => {
  const { item1, item2 } = response.data
  var error = ''
  item2.forEach((item) => {
    error += item.storageMessage + ','
  })
  proxy.$alert(item1 + '<p>' + error + '</p>', '导入结果', {
    dangerouslyUseHTMLString: true
  })
  getList()
}

// 导出按钮操作
function handleExport() {
  proxy
    .$confirm("是否确认导出退款记录表数据项?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(async () => {
      await proxy.downFile('/business/LayOrderRefund/export', { ...queryParams })
    })
}

handleQuery()
</script>